<template>
  <div>
    <el-tabs type="border-card">
      <el-tab-pane label="用户列表">
        <el-table border :data="userList">
          <el-table-column prop="id" label="id" width="120" align="center">
          </el-table-column>
          <el-table-column
            prop="name"
            label="用户名"
            width="120"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="account"
            label="账号"
            width="150"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="password"
            label="密码"
            width="150"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="email" label="邮箱" width="180" align="center">
          </el-table-column>
          <el-table-column
            prop="phone"
            label="手机号"
            width="150"
            align="center"
          >
          </el-table-column>
          <!-- <el-table-column
          prop="permissions"
          label="权限"
          width="100"
          align="center"
        >
        </el-table-column> -->
          <el-table-column
            prop="permissions"
            label="权限"
            width="100"
            align="center"
          >
            <tmeplate slot-scope="scope">
              <p>
                {{
                  scope.row.permissions == 0
                    ? "超级管理员"
                    : scope.row.permissions == 1
                    ? "管理员"
                    : "普通用户"
                }}
              </p>
            </tmeplate>
          </el-table-column>
          <el-table-column
            prop="date"
            label="注册时间"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column label="操作" width="100" align="center">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click.native.prevent="edit(scope.row)"
                >编辑</el-button
              >
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100 " align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="del(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="currentPage4"
          :page-size="pageSize"
          layout="total,  prev, pager, next, jumper"
          :total="total"
          @prev-click="prev(page)"
          @next-click="next(page)"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </el-tab-pane>
    </el-tabs>
    <!-- 弹框 -->
    <el-dialog
      title="编辑用户信息"
      center
      :append-to-body="true"
      :lock-scroll="false"
      :visible.sync="dialogShow"
      width="800px"
    >
      <editorDialog
        v-if="dialogShow"
        :editorContent="editorContent"
      ></editorDialog>
    </el-dialog>
  </div>
</template>

<script>
import editorDialog from "./editorDialog.vue";
export default {
  name: "userList",
  components: {
    editorDialog,
  },
  data() {
    return {
      userList: [],
      total: 90, //总条目数
      totalPage: 100, //总页数
      page: 1, // 当前页数
      pageSize: 10, //每页显示条目个数
      dialogShow: false,
      // 传给编辑框的用户信息
      editorContent: "",
    };
  },
  created() {
    this.getUserList();

    this.getUser(this.page); // 获取用户每页数据
  },
  methods: {
    getUserList() {
      this.$http.get("/user").then(
        (res) => {
          // this.userList = res.data;
          this.total = res.data.length; //总条目数
          this.totalPage = Math.ceil(res.data.length / this.pageSize); // 后台用户总页数 总数据除以每页展示数等于总页数
          console.log(this.totalPage);
        },
        (err) => {
          console.log(err);
        }
      );
    },
    // 请求每页数据
    getUser(page) {
      this.$http.get(`/user?_page=${page}&_limit=${this.pageSize}`).then(
        (res) => {
          // 获取到用户列表
          this.userList = res.data;
          console.log(this.userList);
        },
        (err) => {
          console.log(err);
        }
      );
    },
    // 页码发生变化时
    handleCurrentChange(page) {
      this.getUser(page);
    },
    // 获取上一页数据
    prev(page) {
      this.getUser(page);
    },
    // 获取下一页数据
    next(page) {
      this.getUser(page);
    },
    //编辑用户
    edit(index) {
      this.dialogShow = true;
      // 将用户信息传给编辑框
      this.editorContent = index;
      console.log(index);
    },

    //用户删除
    del(index) {
      //获取当前权限
      var permissions = sessionStorage.getItem("permissions");
      if (permissions != 0) {
        this.$message({
          type: "error",
          message: "无权限操作！",
        });
        return;
      }
      this.$confirm("确认是否删除", "提示", {
        confirmButtonText: "确定",
        concelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$message({
          type: "success",
          message: "删除成功",
        });
        this.$http
          .delete(`user/${index.id}`)
          .then((res) => {
            console.log(res);
            location.reload();
          })
          .catch((err) => {
            console.log(err);
          });
      });
    },
  },
};
</script>

<style scoped>
.el-tabs__nav-scroll {
  width: 100px;
  height: 100px;
}
</style>